<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			body {
				font-size: 14px;
			}
			
			th,
			td {
				border: 1px solid lightgray;
				padding: 1px;
				width: 11%;
				text-align: center;
			}
			
			th {
				padding: 10px 0;
				background: lightblue;
			}
			
			img {
				width: 50px;
				height: 30px;
			}
			
			.mui-btn {
				height: 26px;
				padding: 2px !important;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div style="height: 50px;position: absolute;top: 0;">
			<header class="mui-bar mui-bar-nav" style="padding: 0;background-color: deepskyblue;">
				<a style="position:absolute;top: 12px;left: 10px;font-size: 18px;color: red;" ng-click="exit()">退出登录</a>
				<h1 class="mui-title" style="color: white;"><span ng-bind="userName"></span>项目费用管理主页</h1>
				<a style="position:absolute;top: 12px;left: 95%;font-size: 18px;color: white;" ng-click="getProject()">刷新</a>
			</header>
		</div>
		<div style="clear: both;height: 1px;display: block;margin-top: 50px;">
			<form class="mui-input-group">
				<div class="mui-button-row" style="text-align: center;">
					<button type="button" class="mui-btn mui-btn-primary" ng-click="add()" style="margin-top: 5px;">新增项目</button>
				</div>
			</form>
			<p style="text-align: center;padding: 10px;font-size: 16px;color: deepskyblue;">我的项目费用</p>
			<div class="col-md-12">
				<div style="width: 150px;float: left;">
					<label>开始时间</label>
					<input type="text" placeholder="开始时间" id="start" readonly="readonly" />
				</div>
				<div style="width: 150px;float: left;margin-left: 15px;">
					<label>结束时间</label>
					<input type="text" placeholder="结束时间" id="end"  readonly="readonly" />
				</div>
				<div style="width: 150px;float: left;margin-left: 15px;">
					<label>项目</label>
					<input type="text" placeholder="" id="project" />
				</div>
				<div style="width: 150px;float: left;margin-left: 15px;">
					<label>费用类型</label>
					<input style="display: none;" id="cost_type_id" />
					<br/>
					<select onchange="hh2()" readonly="readonly" id="cost" style="width: 100%;height:100%;float: left;margin-top: 1px;border: 1px solid lightgray;padding: 5px;" ng-click="selectSheet()">
									<option value="0">全部</option>
									<option href="#" ng-repeat="item in types" value="{{item.id}}" ng-click="okProj2(item.cost_name,item.id)">{{item.cost_name}}</option>
								</select>
					<!--<input type="text" placeholder="" readonly="readonly" id="cost"ng-click="selectSheet2()" />-->
				</div>
				<div style="width: 50px;float: left;text-align: left;padding-top: 30px;margin-left: 15px;">
					<button type="button" class="mui-btn mui-btn-primary" style="height: 30px !important;padding: 5px 10px !important;" ng-click="getProject()">查询</button>
				</div>
			</div>
			<table style="width: 100%;TABLE-LAYOUT: fixed; WORD-BREAK: break-all;">
				<tr>
					<th style="">项目名称</th>
					<th style="">添加时间</th>
					<th style="">备注</th>
					<th style="">类型</th>
					<th style="">费用</th>
					<th style="">拍照</th>
					<th style="">编辑</th>
					<th style="">小计</th>
					<th style="">项目编辑</th>
				</tr>
				<tr ng-repeat="item in items">
					<td ng-bind="item.project_name"></td>
					<td ng-bind="item.p_add_time"></td>
					<td ng-bind="item.p_remarks"></td>
					<td colspan="4">
						<table style="width:100%;TABLE-LAYOUT: fixed; WORD-BREAK: break-all;">
							<tr ng-repeat="(key,val) in item.child">
								<td ng-bind="val.cost_name"></td>
								<td ng-bind="val.cost"></td>
								<td><img ng-hide="{{val.imgs==null}}" class="img" ng-click="showImg(val.imgs[0])" ng-src="{{val.imgs[0]}}" style="cursor: pointer;" /></td>
								<!--<td ng-bind="val.c_remarks"></td>-->
								<td style=""><button ng-click="deleteFY(val.cost_id)" class="mui-btn mui-btn-danger">删除</button></td>
							</tr>
						</table>
					</td>
					<td ng-bind="item.total_money"></td>
					<td style=""><button ng-click="addFY(item.project_id)" class="mui-btn mui-btn-primary">新增费用</button>&nbsp;<button ng-click="deleteProj(item.project_id)" class="mui-btn mui-btn-danger">删除</button></td>
				</tr>
			</table>
		</div>
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
						<h4 class="modal-title" id="myModalLabel">
									新增项目
								</h4>
					</div>
					<div class="modal-body">
						<div class="mui-input-row">
							<label>项目名</label>
							<input id="project_name" style="border: 1px solid lightgray;padding-left: 5px;" type="text" class="mui-input-clear" placeholder="项目名">
						</div>
						<div class="mui-input-row">
							<label>项目描述</label>
							<textarea type="text" id="project_desci" rows="4" style="border: 1px solid lightgray;padding: 5px;" placeholder="项目描述"></textarea>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" ng-click="addProj()">
									确定
								</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<div class="modal fade" id="addFYModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
						<h4 class="modal-title" id="myModalLabel">
									新增项目费用
								</h4>
					</div>
					<div class="modal-body">
						<form id="uploadForm">
							<div class="mui-input-row">
								<label>类型</label>
								<input style="display: none;" id="uid" name="uid" />
								<input style="display: none;" id="project_id" name="project_id" />
								<input style="display: none;" id="fy_id" name="cost_type_id" />
								<select onchange="hh()" readonly="readonly" id="fy_name" style="width: 60%;height:100%;float: left;margin-top: 1px;border: 1px solid lightgray;padding: 5px;" ng-click="selectSheet()">
									<option href="#" ng-repeat="item in types" value="{{item.id}}" ng-click="okProj2(item.cost_name,item.id)">{{item.cost_name}}</option>
								</select>
								<!--<span class="mui-icon mui-icon-arrowdown" style="margin-top: 5px;"></span>-->
							</div>
							<div class="mui-input-row">
								<label>费用</label>
								<input type="text" style="border: 1px solid lightgray;padding: 5px;" name="cost" placeholder="费用"></input>
							</div>
							<div class="mui-input-row">
								<label>照片</label>
								<input style="margin-top: 10px;" type="file" id="inputImage" name="imgs" accept="image/gif,image/jpg,image/jpeg,image/bmp,image/png"></input>
							</div>
							<div class="mui-input-row">
								<label>备注</label>
								<input type="text" name="remarks" style="border: 1px solid lightgray;padding: 5px;" placeholder="" name="desci"></input>
							</div>
						</form>
						<div style="clear: both;"></div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" ng-click="addProjFY()">
									确定
								</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<img id="imgInModalID" src="" style="width: 100%;height: 100%;">
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script src="js/bootstrap-datetimepicker.min.js"></script>
		<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
		<script src="layer/layer.js"></script>
		<script src="config/url.js?v=1.0.1"></script>
		<script src="js/home.js?v=1.0.5"></script>
		<script>
			history.go(1);
			if(!localStorage.getItem("gcs_user_name")) {
				window.location.href = 'login.html';
			}
		</script>
	</body>

</html>